আসসালামুয়ালাইকুম। আশা করি সকলে সৃষ্টিকর্তার অশেষ রহমতে ভালো আছেন। আজ বেশ অনেক দিন পর টিউন করতে বসলাম। আজকে টিউন করবো ওয়্যার্ডপ্রেসে কিভাবে ফেসবুক, টুইটার, স্টাম্বল আপন এবং ডিগের ভাসমান শেয়ারিং বাটন বানাতে হয়। বাটনটি দেখতে যেরকরমঃ
এখনকার দিনে ওয়েবসাইট বা ব্লগে আসা ট্রাফিকের একটি ভালো অংশই আসে এই সকল বুকমারকিং সাইট আর সামাজিক যোগাযোগ সাইট থেকে, যদিও এসকল সাইট থেকে আসা অনেক ভিজিটর যারা আপনার কন্টেন্টের মুল্য না বুঝে চলে যায় তবুও এতে করে আপনি নতুন কিছু নিয়মিত পাঠক পেতে পারেন। যেমন আমি টেকটিউন্সের লিঙ্ক পেয়েছিলাম আমার এক ফেসবুক ফ্রেন্ডের ওয়ালে, আর এখন আমি টিটি এর নিয়মিত পাঠক।
তো যাই হোক কথা না বাড়িয়ে সরাসরি টিউটোরিয়ালে চলে যাই। যদিও কাজটি খুবই সোজা তবুও স্ক্রিনশট ব্যবহার করেছি, যাতে যারা এ বিষয়ে নতুন তারা যাতে কোন বিরম্বনায় না পরেন এবং সঠিক ভাবে কাজ সম্পন্ন করতে পারেন।
যেভাবে ফেসবুক, টুইটার, স্টাম্বল আপন এবং ডিগের ভাসমান শেয়ারিং বাটনঃ
১.প্রথম কাজ হল আপনাকে আপনার ওয়্যার্ডপ্রেসের ব্লগে লগ-ইন করুন।
২. এরপর এডমিন প্যানেলের Appearance বাটনে ক্লিক করুন, এতে এটি সম্প্রসারিত হবে, তারপর Editor বাটনে ক্লিক করুন।
৩.পেজ লোডিং শেষ হলে নিচের ছবির মত style.css ফাইলে ক্লিক করুন। এতে ফাইলটি ওপেন হবে।
৪.এরপর নিচের কোডটি আপনার থিমের ডিজাইনারের নাম ও বিভিন্ন তথ্যাদির পরে পেস্ট করুন।
#sharebox {
background-color:#fff;
border:1px solid #ccc;
bottom:50px;
left:30px;
position:fixed;
}
#sharebox .float {
padding:5px;
}
৫. Update File বাটনে ক্লিক করুন এতে কোডটি উক্ত ফাইলে যুক্ত হয়ে যাবে।
৬. এরপর নিচের চিত্রের মত single.php ফাইলটি খুজে বের করুন, অতঃপর ক্লিক করুন।
৭.এবার ফাইলটি ওপেন হলে <div class=”entry”> এ জাতীয় কোন কোড খুজে বের করুন।
৮.<div class=”entry”> এটি খুজে পেলে ঠিক এর পরের লাইনেই নিচের মত করে এই কোডটি এড করুনঃ
<div id="sharebox">
<div>
<script type="text/javascript">
tweetmeme_source = 'islaminheart';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>
<div>
<script>var fbShare = {
url: <?php the_permalink() ?>,
size: 'large',
badge_text: 'fff',
badge_color: '3b5998',
google_analytics: 'true'
}</script>
<script src="http://widgets.fbshare.me/files/fbshare.js"></script>
</div>
<div>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div>
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a></a>
</div>
</div>
- ওয়্যার্ডপ্রেস ব্লগে/ওয়েবসাইটে ফেসবুক, টুইটার, স্টাম্বল আপন এবং ডিগের ভাসমান শেয়ারিং বাটন যোগ করে ব্লগের ট্রাফিক বাড়াবেন যেভাবে
১০. **লক্ষ করুন… উপরের কোডে
tweetmeme_source = 'islaminheart'; আছে এই কোডে islaminheart এর স্থলে টুইটারে আপনার ইউজার নেমদিয়ে রিপ্লেস করুন। যেমন আমারটি http://twitter.com/islaminheart তাই আমি http://twitter.com/ এর পরে থাকা islaminheart দিয়ে রিপ্লেস করবো, এক্ষেত্রে আপনি আপনারটা দিয়ে রিপ্লেস করবেন।
৯. এবার Update File বাটনে ক্লিক করুন।
আপনার কাজ শেষ। এবার আপনি আপনার ব্লগের বা ওয়েবসাইটের যেকোন পোস্ট ওপেন করুন, আশা করি আপনি ভাসবান শেয়ারিং বক্স দেখতে পাবেন যা যেকারো নজড় কারবে, এতে করে আপনার পাঠক আপনার ব্লগ বা ওয়েবসাইটকে শেয়ার করতে আগ্রহ প্রকাশ করবে। ডেমো দেখতে আমার ইসলামিক ব্লগটি দেখতে পারেন।
আশা করি সকলে উক্ত কাজে সফলতা লাভ করবেন এবং কমেন্টে আপনার ভালো লাগা, মন্দ লাগা বা আমার টিউন করার বিষয়ে কোন মতামত অথবা দোষ-গুণ ইত্যাদি জানাবেন। যদি সকলের ভালো লাগে তবে এ জাতীয় টিউটোরিয়াল ভিত্তিক লেখা আরো লেখার চেষ্টা করবো।
ঘুর ব্যাটা আমার এই বাটন পছন্দ নয়! তবে যাই হক তোর লেখাটা দারুণ হয়েছে। অনেকে দেখি এই বাটন হেবি পছন্দ করে। বুকমার্ক করে রাখলাম কারও যদি লাগানোর দরকার হয় লিংক দেব। এটা পড়লে মনে হয় আর আমার সাহায্য লাগবে না।
দোয়া করতো কাল যেন মেজাজ ভালো থাকে। তাহলে একটা ট্যাক্সটা ইফেক্ট ডিজাইন করেছি ওটা নিয়ে লিখবো।
@শিবলী, বুঝাই যাচ্ছে আপনার মেজাজটা খরখরে হয়ে রয়েছে। ফটোশপের উপরে লেখতে থাকেন। ফটোশপ আর সিএসএস দিয়ে http://www.rexmart.com এই সাটের মতো একটা লেআউট বানাইতে পারবেন? এই জাতীয় একটা প্রোজেক্টের কাজ পাইতে পারি…
@মাহবুব টিউটো, আমি যদি সেম সেম বানিয়ে দিই তাহলে চলবে???
আপনাকে CSS ফাইল এবং PSD ফাইল দিয়ে দেব আপনি কাস্টমাইজড করে নেবেন। তবে xml আপনাকেই করতে হবে। আমি ভাই php এবং xml এর কাজে এখনই হাত দিচ্ছি না।
@শিবলী, এখন কিছু করার দরকার নাই্। প্রজেক্টটা ফাইনাল হলে রিকোয়্যারমেন্ট দেখে তার পর সিদ্ধান্ত নেওয়া যাবে। ইদানিং আমাকে ফ্লাসের কাজে হাত দিতে হবে। সিএমএস থেকে একটু দূরে গিয়ে ডিজাইন না করলে আলাদা কিছু করা কষ্ট কর হয়ে যায়। ধন্যবাদ।
@মাহবুব টিউটো, ভাই আপনাকে ফেজবুকে বার্তা পাঠাই কিন্তু রিপলাই নাই! ঘটনা কি? আচ্ছা যাই হক আমি টিউটোরিয়াল বিডির জন্য দুইটা হেডার তৈরি করেছি। আপনিও দেখেন ভিজিটরটাও দেখুক।
১ নং স্কিন সট
২ নং স্কিন সট
@শিবলী,
বাটনটা দেখতে সুন্দর না হলেও ট্রাফিক পাবার জন্য ব্যাপকভাবে সাহায্য করবে, যেমনটি আমার ক্ষেত্রে করছে 😆
তোর মেজাজ যাতে ভালো থাকে সেজন্য দোয়া করে দিলাম ; লিখে ফেল, তো তুই কি কোন কোর্স টোর্স করেছিস নাকি? ❓
তো এক কাজ করা যেতে পারে, ভাবিয়া দেখিতে অনুরোধ করিবো 😆 … ম্যাট্রিক পরীক্ষার পরে প্রফেশনাল ব্লগার হয়ে যাবো + টাকা আয়েরও ধান্দা করিব 😉 , সবই থাকবে সাইড প্রফেশন। তখন তোর মত ডিজাইনারের ব্যাপক প্রয়োজন পড়বে, ভাবিতেছি তোরে নিয়া এগিয়ে যাবো… থাকবি নাকি শিবলী? :p কেউ সাথে থাকলে নিজের ওপর চাপ কমে, নিজে একাই সব শিখতে আর করতে গেলে হযবরল হয়ে যায়, তাই তুই ঐ দিকেই মন দে, আমি এদিকে আসি…
আর এখন আমার ভালো একটা ডিজাইনের অনেক প্রয়োজন, ইসলামি ব্লগটার জন্য, ইউনিকিউ একটা ফাটাফাটি থিম ডিজাইন করিয়া দিবি? ভাবিয়া দেখিতে অনুরোধ করিব…
তুই ইংরেজীতে দূর্বল :(, ভালো কোথাও কোচিং কর বা দিনে কমপক্ষে ১৫ মিনিট করে চরচা কর, ইংরেজী পানির মত সোজা লাগবে। আর পারলে ভালো মানের ইংরেজী ব্লগ গুলো নিয়মিত পড়, ইংরেজী অনেক উন্নত হয়ে যাবে গ্যারান্টি, আমি কিন্তু এভাবেই আগাইসি, ইংরেজীতে ৮২+ নম্বর পাইসি শেষ পরীক্ষায় কোন কোচিং ছাড়াই… 😀
@ডিজে আরিফ, না ভাই আমার মত গরিব মানুষ কোন কোর্স কারার সুযোগ পায় নাই। তুই যে একদিন ভালো মানের ব্লগার হতে পারবি এটা আমি জানি। আমি সব সময় তোর সাথে তাকার চেষ্টা করবো। আর একই সাথে মার্কেটিং এবং প্রোগ্রামিং নিয়ে কাজ করা ভীষণ কঠিন হয়।
তোর ব্লগ যদি ডিজাইন করার দরকার হয় আমি আছি। আমি হয় তো মোটা মুটি মানের একটা ডিজাইন করে দিতে পারবো। তবে আমার পরামর্শ হবে কোন থিম আমার কাছ থেকে ডেভেলপ করে নিলে ভালো করবি। তবে শর্ত হল থিম আমি বাছাই করবো আমি এবং তুই শুধু বলবি লেআউট কয় কলামের ওপর হবে। তোর যদি মনে হয় যে “আমি এমন একটা থিম চাই যে আগে কেউ ব্যাবহার করে নাই, আমি ডেভেলপ করে নিবো না” তবে তুই নিশ্চিন্তে থাকতে পারিস কারণ মূল থিমের ছিটেফোঁটা ছাড়া কিছুই থকবে না।
হুম! ভাই ইংরেজিতে দুর্বল তবে আমিও তোর কাছাকাছি নাম্বার পাই। আমার মূল সমস্যা হল গুছিয়ে করে লিখতে পারি না আর বাক্য মাঝে মাঝেই ভুল হয়। তোর আইডিয়া গুলো মনে রাখবো।
ইদানীং আমি jQuery এবং JavaScript এর দিকে নজর দিয়েছি। এর পর PHP এর দিকে নজর দিব। তখন আর আটকা আটকি থাকবে না।
@শিবলী,
ভালো ভালো, কোর্স করা ছাড়াই আগানো ভালো, এতে নিজের প্রতীভার বিকাশ হয়:lol: …
থিম ডিজাইনের বিষয়টা তোর ইপর ছেড়ে দিলাম, তোর যেটা ভালো এবং আমার জন্যও ভালো হবে এমন কোন থিম ডেভেলপ কর বা ডিজাইন কর। থিম টার ডিজাইন এমন হতে হবে যাতে ইসলামিক ব্লগের সাথে মানানসই হয়, দেখতে দৃষ্টিনন্দন, সহজে লোডিং হয়, অটোমেটিক হোম পেজে পুরো পোস্ট না দেখিয়ে সামারী বা অংশ বিশেষ দেখায় [ইমেজ:lol: থাকলে সেটাকে যাতে অটো রিসাইজ করে মানানসইভাবে রাখে], লেখকের নাম আলাদা দেখায়, দেখলেই যাতে মনে হয় যে হ্যা এটা ইসলামি ব্লগ:lol:, Widget যাতে যোগ করা যায় পছন্দ মত:lol:। আর লেয়াউট টা তোর উপর ছেড়ে দিলাম, তোর ডিজাইনের সাথে যাতে মানানসই হয়, আর সুন্দর ব্যানার যাতে যোগ করা যায়।
তোর সুবিধারথে ব্যানার আমিই ডিজাইন করিতে ইচ্ছুক, ব্যানারের সাইজ কত*কত হলে মানানসই হবে তা জানিয়ে দিস আমি করে নিব, আর তুই পারলে তো কথাই নেই:lol:
ধন্যবাদ, অনেক অনেক ধন্যবাদ। আমার সাথে থাকবি জেনে অনেক ভালো লাগলো… মাথা ভরতি শুধু প্ল্যান আর প্ল্যান, আজ ভাবি এই করবো, তো কাল ভাবি ওই করবো… ম্যাট্রিকের পরেই সব বিষয়ে ভাববো, আর কাজও শুরু করে দিব…
আমারও পিএইচপি শেখার ইচ্ছা আছে…… দেখি ম্যাট্রিকের পরেই শিখে ফেলবো। 😆
@ডিজে আরিফ, আগে HTMl গুলে না খেলে php শেখা যাবে না। যদিও এটা আমার মত!
তুই ব্যানার ডিজাইন করবি শুনে বুঝতে পারলাম তুই ডিজাইন জানিস। তাহলে একটা থিম তৈরি করে দে। আমি CSS এবং ওয়ার্ডপ্রেস এর জন্য কোডিং করে ফেলি কি বলিস??
@শিবলী,
নাহ… ডিজাইন পারি বলতে আসলে তেমন ভালো না, শিক্ষানবীশ, ফটোশপ জাতীয় সফটওয়্যারে তেমন ইন্টারেস্ট নেই, তবুও একটু আকটু তো না পারলেই নয়, তার হালকা পাতলা পারি, থিম ডিজাইন আমার দ্বারা
সম্ভব না… 😆
ভাইয়া, আমি এই সাইটটি বানাতে চেষ্টা করছি……
আপনার সাহায্য চাই…………
অনুগ্রহ করে আমাকে G-TALK ডাকবেন=> tapasfun@gmail.com
আর আমি এটা করতে পারলাম না
আমার থিমে এটা খুজে পেলাম না=>
৭.এবার ফাইলটি ওপেন হলে এ জাতীয় কোন কোড খুজে বের করুন।
আনুগ্রহ করে সাহাজ্য করলে খুব খুশি হবো। ধন্যবাদ, ভালো থাকবেন।
bai amnader comments very funny.
=)
ভালোই হল একটা কাজের জিনিস শিখলাম ।