Twitter feed widget for django-fluent-contents
Project description
fluentcms-twitterfeed
=====================
Twitter feed widget for django-fluent-contents
Installation
============
First install the module, preferably in a virtual environment. It can be installed from PyPI:
.. code-block:: shell
pip install fluentcms-twitterfeed
Backend Configuration
---------------------
First make sure the project is configured for django-fluent-contents_.
Then add the following settings:
.. code-block:: python
INSTALLED_APPS += (
'fluentcms_twitterfeed',
)
The database tables can be created afterwards:
.. code-block:: shell
python ./manage.py migrate
Now, the ``TwitterSearchPlugin`` and ``TwitterRecentEntriesPlugin``
can be added to your ``PlaceholderField`` and ``PlaceholderEditorAdmin`` admin screens.
Frontend Configuration
----------------------
Make sure that all plugin media files are exposed by django-fluent-contents_:
.. code-block:: html+django
{% load fluent_contents_tags %}
{% render_content_items_media %}
This tag should be placed at the bottom of the page, after all plugins
are rendered. For more configuration options - e.g. integration with
django-compressor - see the `template tag documentation
<http://django-fluent-contents.readthedocs.org/en/latest/templatetags.html#frontend-media>`_.
CSS Code
~~~~~~~~
The stylesheet code is purposefully left out, since authors typically like to provide their own styling.
JavaScript Code
~~~~~~~~~~~~~~~
No configuration is required for the JavaScript integration.
By default, the plugin includes all required JavaScript code.
HTML code
~~~~~~~~~
If needed, the HTML code can be overwritten by redefining
``fluentcms_twitterfeed/recent_entries.html`` add / or ``fluentcms_twitterfeed/search.html``.
Usage
-----
TwitterRecentEntriesPlugin
##########################
For this plugin it's not necessary to create a widget for every plugin in your
website; you could just consider the widget you create on the Twitter website
as *templates* for this django CMS plugin:
##############################
Create the twitter-side widget
##############################
#. Login in your twitter account;
#. Go to https://twitter.com/settings/widgets;
#. Create new widget;
#. Select "**user timeline**" as source;
#. Configure the options (theme, colours etc) as described in https://dev.twitter.com/docs/embedded-timelines;
#. Create widget;
#. get the value of ``data-widget-id`` in the embed code;
#####################
Plugin instances data
#####################
``data-widget-id`` value can be shared by any number of plugins instances, the
plugin-provided user timeline will be shown, while the twitter widget graphics
appearance will be used.
#. Add or edit the **Twitter** plugin in you placeholders;
#. Fill in the Twitter widget it field using the ``data-widget-id`` value from
the previous step;
#. Save the plugin;
TwitterSearchPlugin
###################
The twitter widget used by this plugin is entirely configured on the twitter
website.
##############################
Create the twitter-side widget
##############################
#. Login in your twitter account;
#. Go to https://twitter.com/settings/widgets;
#. Create new widget;
#. Select "**Search**" as source;
#. Configure the search query;
#. Configure the options (theme, colours etc) as described in https://dev.twitter.com/docs/embedded-timelines;
#. Create widget;
#. get the value of ``data-widget-id`` in the embed code;
#####################
Plugin instances data
#####################
#. Add or edit the **Twitter Search** plugin in you placeholders;
#. Fill in the Twitter widget it field using the ``data-widget-id`` value from
the previous step;
#. Optionally fill-in the query field in the plugin form; this is only used for
non-javascript enabled browser, as the ``data-widget-id`` will take over on
javascript-enabled ones;
#. Save the plugin;
Contributing
------------
If you like this module, forked it, or would like to improve it, please let us know!
Pull requests are welcome too. :-)
.. _django-fluent-contents: https://github.com/edoburu/django-fluent-contents
=====================
Twitter feed widget for django-fluent-contents
Installation
============
First install the module, preferably in a virtual environment. It can be installed from PyPI:
.. code-block:: shell
pip install fluentcms-twitterfeed
Backend Configuration
---------------------
First make sure the project is configured for django-fluent-contents_.
Then add the following settings:
.. code-block:: python
INSTALLED_APPS += (
'fluentcms_twitterfeed',
)
The database tables can be created afterwards:
.. code-block:: shell
python ./manage.py migrate
Now, the ``TwitterSearchPlugin`` and ``TwitterRecentEntriesPlugin``
can be added to your ``PlaceholderField`` and ``PlaceholderEditorAdmin`` admin screens.
Frontend Configuration
----------------------
Make sure that all plugin media files are exposed by django-fluent-contents_:
.. code-block:: html+django
{% load fluent_contents_tags %}
{% render_content_items_media %}
This tag should be placed at the bottom of the page, after all plugins
are rendered. For more configuration options - e.g. integration with
django-compressor - see the `template tag documentation
<http://django-fluent-contents.readthedocs.org/en/latest/templatetags.html#frontend-media>`_.
CSS Code
~~~~~~~~
The stylesheet code is purposefully left out, since authors typically like to provide their own styling.
JavaScript Code
~~~~~~~~~~~~~~~
No configuration is required for the JavaScript integration.
By default, the plugin includes all required JavaScript code.
HTML code
~~~~~~~~~
If needed, the HTML code can be overwritten by redefining
``fluentcms_twitterfeed/recent_entries.html`` add / or ``fluentcms_twitterfeed/search.html``.
Usage
-----
TwitterRecentEntriesPlugin
##########################
For this plugin it's not necessary to create a widget for every plugin in your
website; you could just consider the widget you create on the Twitter website
as *templates* for this django CMS plugin:
##############################
Create the twitter-side widget
##############################
#. Login in your twitter account;
#. Go to https://twitter.com/settings/widgets;
#. Create new widget;
#. Select "**user timeline**" as source;
#. Configure the options (theme, colours etc) as described in https://dev.twitter.com/docs/embedded-timelines;
#. Create widget;
#. get the value of ``data-widget-id`` in the embed code;
#####################
Plugin instances data
#####################
``data-widget-id`` value can be shared by any number of plugins instances, the
plugin-provided user timeline will be shown, while the twitter widget graphics
appearance will be used.
#. Add or edit the **Twitter** plugin in you placeholders;
#. Fill in the Twitter widget it field using the ``data-widget-id`` value from
the previous step;
#. Save the plugin;
TwitterSearchPlugin
###################
The twitter widget used by this plugin is entirely configured on the twitter
website.
##############################
Create the twitter-side widget
##############################
#. Login in your twitter account;
#. Go to https://twitter.com/settings/widgets;
#. Create new widget;
#. Select "**Search**" as source;
#. Configure the search query;
#. Configure the options (theme, colours etc) as described in https://dev.twitter.com/docs/embedded-timelines;
#. Create widget;
#. get the value of ``data-widget-id`` in the embed code;
#####################
Plugin instances data
#####################
#. Add or edit the **Twitter Search** plugin in you placeholders;
#. Fill in the Twitter widget it field using the ``data-widget-id`` value from
the previous step;
#. Optionally fill-in the query field in the plugin form; this is only used for
non-javascript enabled browser, as the ``data-widget-id`` will take over on
javascript-enabled ones;
#. Save the plugin;
Contributing
------------
If you like this module, forked it, or would like to improve it, please let us know!
Pull requests are welcome too. :-)
.. _django-fluent-contents: https://github.com/edoburu/django-fluent-contents